<template>
    <div class="product">
        <div class="buy">
            <product-buying  :isShowOrder="isShowOrder" @getOrder="returnChildData"></product-buying>
            <el-dialog title='订单' :visible.sync="dialogTableVisible" :close-on-click-modal="false">
                <order class="order" ref="order" :orderData="order" @quitOrderPage="dialogTableVisible = false"></order>
            </el-dialog>
        </div>
        <div class="more">
            <div class="productInfo">
                <el-tabs type="border-card" @tab-click="changeProductInfoPage">
                    <el-tab-pane label="商品详情"></el-tab-pane>
                    <el-tab-pane label="历史成交"></el-tab-pane>
                    <el-tab-pane label="产品评价"></el-tab-pane>
                    <el-tab-pane label="交易说明"></el-tab-pane>
                    <keep-alive>
                        <router-view/>
                    </keep-alive>
                </el-tabs>
                <br>
                <br>
                <br>
            </div>
            <div class="sameTypeProduct">
                <sameTypeProduct :products="sameTypeProduct"></sameTypeProduct>
            </div>
        </div>
        <div id="bottom"></div>
    </div>
</template>

<script>
import sameTypeProduct from './sameTypeProduct.vue'
import Order from './Order/index.vue'
import ProductBuying from './ProductBuying'
export default {
    name:'product',
    components:{
        sameTypeProduct,
        Order,
        ProductBuying,
        ProductBuying
    },
    data() {
        return {
            path:['/supplier/product', '/supplier/product/barginHistory', '/supplier/product/customerComment', '/supplier/product/tradeSpecification'],

            dialogTableVisible:false,
            order:{},
            
            sameTypeProduct:[
                {'name':'香蕉','price':6.6,'url':require('./img/香蕉.jpg')},
                {'name':'香蕉','price':6.6,'url':require('./img/香蕉.jpg')},
                {'name':'香蕉','price':6.6,'url':require('./img/香蕉.jpg')}
            ],
        }
    },
    computed: {
        pid() {
            return this.$store.state.supplier.product_id
        }
    },
    methods:{
        changeProductInfoPage(tab, event) {
            if (this.path[tab.index]) this.$router.push(this.path[tab.index])
        },
        isShowOrder:function(){
            this.dialogTableVisible = !this.dialogTableVisible
        },
        returnChildData(data){
            this.order = data
        },
        async load() {
        }
    },
    created() {
        if (this.$route.query.pid) this.$store.state.supplier.product_id = this.$route.query.pid
        this.load()
    }
}
</script>


<style lang="less" scoped>
.productInfo /deep/ .el-tabs__item{
    height: 80px;
    line-height: 80px;
    font-size: 32px;
}
/deep/ .el-dialog{
    max-width: 840px;
}
.product{
    margin: 0 auto;
    background-color: rgb(243, 239, 239);
    .buy{
        // min-width: 1260px;
        margin: 20px auto;
        margin-top: 20px;
    }
    .more{
        display: flex;
        justify-content: space-around;
        .productInfo{
            width: 70%;
        }
        .sameTypeProduct{
            width: 25%;
            border: 1px solid rgb(230, 224, 224);
        }
    }
}
#bottom{
    height: 500px;
}
</style>